import { Button, Table, Tag } from "antd";
import type { ColumnsType } from "antd/es/table";
import * as LucideIcon from "lucide-react";
import { PlusIcon } from "lucide-react";
import { useEffect, useState } from "react";
import { apiPermissionTree } from "~/api";
import type { IPermission } from "~/api/login/type";
import Title from "~/components/ui/title";
import { useTableHeight } from "~/hooks/useTableHeight";
import PermissionModal from "./permission-modal";

export default function Permission() {
  const tableHeight = useTableHeight(223);
  const [dataList, setDataList] = useState<IPermission[]>([]);
  const [editPermission, setEditPermission] = useState<IPermission | null>(
    null,
  );
  const [addParentId, setAddParentId] = useState<number>(0);
  const [modalVisible, setModalVisible] = useState(false);
  const [loading, setLoading] = useState(false);

  const _handler = {
    onCancel: () => {
      setEditPermission(null);
      setModalVisible(false);
    },
    onOk: () => {
      setModalVisible(false);
      _fetch.init();
    },
    addPermission: async (record?: IPermission) => {
      setAddParentId(record?.id || 0);
      setEditPermission(null);
      setModalVisible(true);
    },
    editPermission: async (record: IPermission) => {
      setAddParentId(record.parentId);
      setEditPermission(record);
      setModalVisible(true);
    },
  };

  const _ui: {
    tableColumns: ColumnsType<IPermission>;
  } = {
    tableColumns: [
      {
        title: "权限名",
        dataIndex: "name",
        key: "name",
        fixed: "left",
        width: 200,
        render: (value: string, record: IPermission) => {
          const menu = {
            icon: LucideIcon[record.icon as keyof typeof LucideIcon],
          } as any;
          return (
            <div className="flex items-center gap-2">
              {menu.icon && <menu.icon size={18} />}
              {value}
            </div>
          );
        },
      },
      {
        title: <LucideIcon.EyeIcon size={18} />,
        dataIndex: "show",
        key: "show",
        width: 60,
        render: (value) => {
          return !value && <LucideIcon.EyeOffIcon size={18} />;
        },
      },
      {
        title: "权限KEY",
        dataIndex: "key",
        key: "key",
        width: 200,
      },
      {
        title: "权限类型",
        dataIndex: "type",
        key: "type",
        width: 100,
        render: (value) => {
          switch (value) {
            case 1:
              return <Tag color="#2db7f5">页面</Tag>;
            case 2:
              return <Tag color="#87d068">功能</Tag>;
            default:
              break;
          }
        },
      },
      {
        title: "路径",
        dataIndex: "path",
        key: "path",
        width: 120,
      },
      {
        title: "备注",
        dataIndex: "remark",
        key: "remark",
        width: 220,
      },
      {
        title: "操作",
        key: "action",
        fixed: "right",
        width: 100,
        render: (_, record) => {
          return (
            <div className="flex items-center justify-end gap-2">
              <Button
                type="link"
                size="small"
                onClick={() => _handler.addPermission(record)}
              >
                新增子权限
              </Button>
              <Button
                type="link"
                size="small"
                onClick={() => _handler.editPermission(record)}
              >
                编辑
              </Button>
            </div>
          );
        },
      },
    ],
  };

  const _fetch = {
    init: async () => {
      setLoading(true);
      const resp = await apiPermissionTree();
      setDataList(resp);
      setLoading(false);
    },
  };

  useEffect(() => {
    _fetch.init();
  }, []);

  return (
    <>
      <Title
        title="权限配置"
        buttonGroups={[
          <Button
            type="primary"
            onClick={() => {
              _handler.addPermission();
            }}
          >
            <PlusIcon size={18} />
            添加权限
          </Button>,
        ]}
      />
      <div className="h-full w-full">
        <Table
          loading={loading}
          scroll={{
            y: tableHeight,
            x: "max-content",
          }}
          rowKey={(item) => item.key}
          columns={_ui.tableColumns}
          dataSource={dataList}
          pagination={false}
        />
      </div>
      <PermissionModal
        defaultParentId={addParentId}
        permission={editPermission}
        visible={modalVisible}
        onCancel={_handler.onCancel}
        onOk={_handler.onOk}
      />
    </>
  );
}
